<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
<!--	模版挂载在哪里，data和方法就写在哪里		-->
<!--			<username v-if="islogin"></username>-->
<!--			<login v-else></login>-->
			<component :is="viewname"></component>
			<input v-if="islogin" type="button" value="logout" @click="logout">
			<input v-else type="button" value="login" @click="login">
		</div>
		<template id="tpl-username">
			<div>
				<h1>{{username}}</h1>
				<h1>王子元真是太棒了！</h1>
			</div>
		</template>
		<template id="tpl-login">
			<div>
				<h1>请登录吧！</h1>
			</div>
		</template>
		<script>
			let username = {
				template: '#tpl-username',
				data(){
					return {
						username:'wangziyaun'
					}
				}
			}
			let login = {
				template: '#tpl-login'
			}
			let vue = new Vue({
				el:'#test',
				data:{
					msg:"王子元有一个充满智慧的大脑瓜",
					islogin: false,
					viewname:""
				},
				methods:{
					login(){
						this.islogin = true;
						console.log("login");
						this.viewname = "username"
					},
					logout(){
						this.islogin = false;
						console.log("logout");
						this.viewname = "login"
					}
				},
				components:{
					username,
					login
				}
			})
		</script>
	</body>
</html>
